<template>
  <v-bottom-navigation app grow height="50">
    <v-btn value="/home">
      <span>客服</span>
      <v-icon>mdi-headset</v-icon>
    </v-btn>

    <v-btn @click="$router.push('/shoppingCart')" value="/category">
      <span>购物车</span>
      <v-badge
        color="pink"
        overlap
        :content="String(this.$store.state.shoppingCartItems.length)"
      >
        <v-icon>mdi-cart-outline</v-icon>
      </v-badge>
    </v-btn>

    <v-btn class="white--text" color="#2AB795" @click="handleCartItemAdd"
      >加入购物车</v-btn
    >
    <v-btn class="white--text" color="#FD994B">立即购买</v-btn>
  </v-bottom-navigation>
</template>

<script>
export default {
  name: 'app-buttombar',

  methods: {
    navBtnClick(path) {
      if (path == 'home') {
        this.$router.push({ path: `/` });
      } else {
        this.$router.push({ path: `/${path}` });
      }
    },
    handleCartItemAdd() {
      this.$bus.emit('onBottombarCartItemAdd');
    }
  }
};
</script>
